<template>
  <div class="merchant alltable">
    <div class="tabbar">
      <div class="let">
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.startday"
          value = 'yyyy-MM-dd'
          placeholder="请选择开始日期"
          style="width: 130px"
        ></DatePicker>&nbsp;
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.endday"
          placeholder="请选择结束日期"
          style="width: 130px"
        ></DatePicker>&nbsp;
        <Select v-model="data_axios.mid" placeholder="服务商名字" class="service" style="width:130px">
          <Option v-for="(item,i) in Mnamelist" :value="item.mid" :key="i">{{ item.cname }}</Option>
        </Select>&nbsp;
        <Select v-model="data_axios.type" placeholder="类型" class="service" style="width:130px">
          <Option v-for="(item,i) in typelist" :value="item.mid" :key="i">{{ item.cname }}</Option>
        </Select>&nbsp;
        <Select
          v-model="data_axios.billstatus"
          placeholder="状态"
          class="service"
          style="width:130px"
        >
          <Option
            v-for="item in billstatuslist"
            :value="item.mid"
            :key="item.cname"
          >{{ item.cname }}</Option>
        </Select>&nbsp;
        <Input
          prefix="ios-search"          
          v-model.trim="data_axios.selectinfo"
          placeholder="请输入关键字"
          style="width: 200px"
        />
        <Button class="btn_default" @click="search">
          <Icon type="ios-search" size="17" class="icon_wy"/>查询
        </Button>
      </div>
      <!--   <div class='rit'>               
                <Button @click="add_merchant"><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>添加员工</Button>
      </div>-->
    </div>
    <div class="tabble">
      <div>
        <Table
          :columns="columns"
          :loading="loading"
          height="560"
          :data="data.datas"
          class="sel_table"
        ></Table>
      </div>
    </div>

    <div class="tab_pages">
      <Page
        :total="data.allCount"
        :page-size="data_axios.pagesize"
        :current.sync="data_axios.pagenumber"
        show-total
        @on-change="merchant_data"
      ></Page>
    </div>
  </div>
</template>
<script>
import { setAdmin, setToken, getAdmin } from "../../../utils/auth.js";
import { selectMname, selectOrderList } from "../../../apis/api_system.js";
import filter from './../../../filters/filter';
export default {
  name: "order_list",
  data() {
    return {
      userId: "",
      model1: "",
      value: "",
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],        
      },
      data_axios: {
        startday: "",
        endday: "",
        pagesize: 10,
        pagenumber: 1,
        mid: "",
        selectinfo: "",
        type: "",
        billstatus: ""
      },
      loading: false,
      Mnamelist: [],
      typelist: [
        {
          mid: 0,
          cname: "商户下单"
        },
        {
          mid: 1,
          cname: "扫码"
        }
      ],
      //   1 2已退款
      billstatuslist: [
        {
          mid: 1,
          cname: "已完成"
        },
        {
          mid: 2,
          cname: "已退款"
        }
      ],

      columns: [
        {
          title: "序号",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "商户名称",
          key: "cname"
        },
        {
          title: "金额 ",
          key: "paymentamt",
           width: 100
        },
        {
          title: "支付时间",
          key: "paydate"
        },
        {
          title: "商户号",
          key: "mid"
        },
        {
          title: "商户订单号 ",
          key: "outtradeno"
        },        
        
        {
          title: "消费者名字",
          key: "username",
           width: 100
        },
        {
          title: "消费者身份证",
          key: "identity"
        },
        {
          title: "状态",
          key: "billstatus",
           width: 100,
          render: (h, params) => {
            const row = params.row;
            // 1已完成 2已退款
            const text = row.billstatus === 1 ? "已完成" : row.billstatus === 2 ? "已退款" : "Fail";
            return <span>{text}</span>;
          }
        },
        {
          title: "类型",
          key: "type",
           width: 100,
          render: (h, params) => {
            const row = params.row;
            const text = row.type === 0 ? "商户下单" : row.type === 1 ? "扫码" : "Fail";
            return <span>{text}</span>;
          }
        },
        {
          title: "备注",
          key: "body",
          tooltip: true
        }
        // {
        //   title: "操作",
        //   key: "",
        //   width: 200,
        //   render: (h, params) => {
        //     let self = this;
        //     return (
        //       <div class="lastcoll">
        //         <i
        //           on-click={() => self.setmodal_edit(params)}
        //           class="ivu-icon ivu-icon-ios-create-outline icon_weight"
        //           title="修改"
        //         >
        //           修改
        //         </i>
        //         <i
        //           on-click={() => self.del(params)}
        //           class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
        //           title="删除"
        //         >
        //           删除
        //         </i>
        //       </div>
        //     );
        //   }
        // }
      ],
      
    };
  },
  
  mounted() {    
    let info = getAdmin();
    this.userId = info.id;
    // console.log(this.userId);
    this.selectMname();
    this.selectOrderList(this.data_axios);
  },
  methods: {   
    //   获取服务商名字
    selectMname() {         
      let data = JSON.stringify({
        requestString: JSON.stringify({}),
        userId: this.userId,
        fullname: "订单列表"
      });
      selectMname(data)
        .then(({ returnString, code, disp }) => {
          if (code == 200) {
            this.Mnamelist = JSON.parse(returnString);
          } else {           
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    },
    //   获取订单列表
    selectOrderList(info) {     
        this.loading = true; 
       if(this.data_axios.startday!=''){
          this.data_axios.startday =  filter.FileterDate(this.data_axios.startday);
       }
       if(this.data_axios.endday!=''){
          this.data_axios.endday =  filter.FileterDate(this.data_axios.endday);
       }      
      let data = JSON.stringify({
        requestString: JSON.stringify(info),
        userId: this.userId,
        fullname: "订单列表"
      });
      selectOrderList(data)
        .then(({ returnString, code, disp ,count}) => { 
          this.loading = false;
          if (code == 200) {    
            //  console.log(JSON.parse(returnString));
            this.data.datas = JSON.parse(returnString);
            this.data.allCount = count;
            // console.log(this.data.allCount)
          } else {            
            this.$Message.warning(disp);
          }
        })
        .catch(err => {});
    },
    //   添加商户
    add_merchant() {},
    //分页改变
    merchant_data() {
       this.selectOrderList(this.data_axios);
    },
    //   搜索
    search() {
      this.data_axios.pagenumber=1;
      this.selectOrderList(this.data_axios);
    },
    // 删除
    del(params) {
      this.$Modal.confirm({
        title: "确认提醒",
        content: "<p>确认删除这条商户信息？</p>",
        onOk: () => {
          //   this.deleteHrpEmployee(params);
        }
      });
    },

    // 修改
    setmodal_edit(params) {}
  }
};
</script>